<template>
  <div class="proInfo">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="proInfoForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="productCode" label="产品编码">
            <el-input v-model="formData.productCode" clearable placeholder="请输入产品编码" />
          </el-form-item>
          <el-form-item prop="productModelCode" label="产品型号">
            <el-input v-model="formData.productModelCode" clearable placeholder="请输入产品型号" />
          </el-form-item>
          <el-form-item prop="productName" label="产品描述">
            <el-input v-model="formData.productName" clearable placeholder="请输入产品描述" />
          </el-form-item>
          <el-form-item prop="saleSeriesName" label="系列">
            <el-input v-model="formData.saleSeriesName" clearable placeholder="请输入系列" />
          </el-form-item>
          <el-form-item prop="proState" label="产品状态">
            <el-select v-model="formData.proState" clearable placeholder="请选择">
              <el-option
                v-for="(list, index) in productStateOption"
                :key="index"
                :value="list.code"
                :label="list.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="isIncludeFgPic" label="图片">
            <el-select v-model="formData.isIncludeFgPic" clearable placeholder="请选择">
              <el-option :value="1" label="有" />
              <el-option :value="0" label="无" />
            </el-select>
          </el-form-item>
          <el-form-item align="left">
            <Button @click="resetClick('proInfoForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('proInfoForm')">查询</Button>
            <Button v-if="isRelevance" type="primary" @click="handleRelevance">关联工单</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="proInfoTable" :show-selection="isRelevance" no-request :table-config="proInfoTableConfig" @selection-change="handlerSelectionChange" />
      <PreviewImage v-model="previewShow" prefix="/img/product/" :image-list="imageList" />
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { getProductImg } from '@/api/mscInfo'
import { JsonToUrl } from '@/utils/params-format'
import PreviewImage from '@/components/PreviewImage'
export default {
  name: 'InfoDataProInfo',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    PreviewImage
  },
  props: {
    isRelevance: { // 是否是关联查询
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      productStateOption: [
        { name: '未投产', code: 'A' },
        { name: '退市', code: 'B' },
        { name: '预退市', code: 'C' },
        { name: '停销', code: 'D' },
        { name: '在产', code: 'E' }
      ],
      formData: {
        productCode: '', // 产品编码
        productModelCode: '', // 产品型号编码
        productName: '', // 产品描述
        saleSeriesName: '', // 系列
        proState: '', // 产品状态
        isIncludeFgPic: '' // 图片
      },
      formRules: {},
      url: '/call-center/api/v1/mscInfo/product/list',
      proInfoTableConfig: {
        interfacePath: '',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段信息配置
        setting: [
          {
            prop: 'productCode',
            label: '产品编码',
            width: 100
          }, {
            prop: 'productModelCode',
            label: '产品型号',
            width: 100
          }, {
            prop: 'productName',
            label: '产品描述',
            width: 100,
            formatData: (val) => { return val.productName ? val.productName : '--' }
          }, {
            prop: 'productCategoryName',
            label: '产品品类',
            width: 100
          }, {
            prop: 'saleSeriesName',
            label: '系列'
          }, {
            prop: 'proStateName',
            label: '产品状态',
            width: 100
          }, {
            prop: 'prodStyle',
            label: '风格'
          }, {
            prop: 'productTextureTypeName',
            label: '材质类型',
            width: 120
          }, {
            prop: 'mainTexture',
            label: '主要材质',
            width: 100
          }, {
            prop: 'exteriorSize',
            label: '尺寸',
            formatData: (val) => {
              if (val.exteriorSize) return val.exteriorSize
              return '--'
            }
          }, {
            prop: 'roughWeight',
            label: '重量',
            formatData: (val) => { return val.roughWeight ? val.roughWeight : '--' }
          }, {
            prop: 'cubage',
            label: '体积',
            formatData: (val) => { return val.cubage ? val.cubage : '--' }
          }, {
            prop: 'mainColorDocName',
            label: '主色',
            formatData: (val) => { return val.mainColorDocName ? val.mainColorDocName : '--' }
          }, {
            prop: 'productColor',
            label: '配色',
            formatData: (val) => { return val.productColor ? val.productColor : '--' }
          }, {
            prop: 'packageNum',
            label: '包件数量',
            width: 120
          }, {
            prop: 'onStreamTime',
            label: '上市时间',
            width: 130,
            formatData: (val) => { return val.onStreamTime ? val.onStreamTime : '--' }
          }, {
            prop: 'stopSaleTime',
            label: '停产时间',
            width: 130,
            formatData: (val) => { return val.stopSaleTime ? val.stopSaleTime : '--' }
          }, {
            label: '图片',
            button: [{
              name: '查看',
              clickFun: this.imgDetail,
              type: 'primary'
            }]
          }
        ]
      },
      imageList: [],
      previewShow: false,
      // 选择项
      selectionData: []
    }
  },
  created() {},
  mounted() {
    this.proInfoTableConfig.interfacePath = this.url
  },
  methods: {
    /**
     * 提交查询
     */
    searchClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const proInfoParams = JsonToUrl(this.formData)
          if (!proInfoParams) {
            this.$message({
              message: '请至少选择一项查询条件',
              type: 'warning'
            })
            return
          }
          this.proInfoTableConfig.interfacePath = `${this.url}${proInfoParams}`
          this.$nextTick(() => {
            this.$refs.proInfoTable.initTableData()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetClick(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     * 查看图片Fun
     */
    imgDetail(row) {
      if (row.whetherIncludePic === 1) {
        getProductImg(row.productId).then(res => {
          if (res.success === 1) {
            this.imageList = res.data.map(item => {
              const obj = { name: item.imageType, url: item.prodPhotoInfoUrl }
              return obj
            })
            this.$nextTick(() => {
              this.previewShow = true
            })
          }
        })
      } else {
        this.$message({
          message: '当前暂时图片'
        })
      }
    },
    // 关联工单
    handleRelevance() {
      if (!this.singleJudge(this.selectionData, '关联工单')) {
        return
      }
      this.$emit('on-relevance', this.selectionData)
    },
    handlerSelectionChange(selectionData) {
      this.selectionData = selectionData
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
